<template>
   <div class="dictionary">
      <el-container>
 
        <div class="left_tree">
          <div class="Cleft_header"><h2 class="Ctitle">导航菜单设置</h2>
              <el-button :disabled="nodes.isParent? false : true" @click="add_catalog" title="新增" class="dict_but" size="mini" icon="el-icon-circle-plus-outline"  type="info" plain></el-button>
              <el-button @click="update_catalog" title="修改" class="dict_but" size="mini" icon="el-icon-edit" type="info" plain></el-button>
              <el-button @click="del_catalog" title="删除" class="dict_but" size="mini" icon="el-icon-delete" type="info" plain></el-button>
          </div>
          <div class="dictionary-tree">
    		  	<zt-ztree class="organization_tree"
    		  	:nodeChange="nodeChange"
    		  	:config="ztreeConfig"
    		  	:beforeExpand="beforeExpand"
    		  	:async="async">
    		  	</zt-ztree>
          </div>
        </div>
 
		   <div class="around_right_box">
        <div class="dict_nav">
          <!-- <el-button size="mini" @click="refresh_dictInfo()"><i class="iconfont icon-shuaxin"></i>刷新</el-button> -->
          <el-button  type="primary" plain size="mini" :disabled="nodes.isParent? true : false"  @click="add_dictInfo()"><i class="iconfont icon-icon-"></i> 新增</el-button>
          <el-button  type="primary" plain size="mini" @click="edit_dictInfo()"><i class="iconfont icon-xiugai"></i>修改</el-button>
				  <el-button  type="primary" plain size="mini" @click="batchDel_dictInfo()"><i class="iconfont icon-shanchu"></i>删除</el-button>
        </div>
				  <div class="dictionary_wrapper_table">
            <el-table style="width: 100%" :data="dictionaryMenuList.rows" border @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
			  			<el-table-column prop="attrCode" label="字典编码" width="180"></el-table-column>
					    <el-table-column prop="attrId" label="自定义编码" width="180"></el-table-column>
					    <el-table-column prop="attrName" label="自定义名称"></el-table-column>
					    <el-table-column prop="disenable" label="状态" width="100">
                  <template slot-scope="scope">
                      {{statusItem[scope.row.disenable]}}
                  </template>
              </el-table-column>
					    <el-table-column prop="attrOrderId" label="排序值" width="120"> </el-table-column>
					    <el-table-column prop="creator" label="创始人"  width="120"> </el-table-column>
					    <el-table-column label="创建时间">
                  <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.ctDate }}</span>
                  </template>
              </el-table-column>
              <el-table-column label="操作"  width="160">
                <template slot-scope="scope">
                  <el-button size="mini" @click="dict_edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" @click="del_dictInfo(scope.$index, scope.row)" type="danger" >删除</el-button>
                </template>
              </el-table-column>
					  </el-table>
            <div class="pageBox">
                <el-pagination
                  @current-change="pageChange"
                  :page-size="12"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              <!-- <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"  @current-change="pageChange"> </el-pagination> -->
            </div>
				 </div>
		 </div>

		  <addDictionary
      v-if="catalogFormVisible"
      :catalogFormVisible.sync="catalogFormVisible"
      :addDIcTreeSubmit="addDIcTreeSubmit"
      :updateDicDataSubmit="updateDicDataSubmit"
      :nodeFlag="nodeFlag"
      :dictForm="dictForm"
      :submitType="submitType">
    </addDictionary>

      <addDicData
      v-if="infoFormVisible"
      :infoFormVisible.sync="infoFormVisible"
      :addDictInfoSubmit="addDictInfoSubmit"
      :addDictInfoForm="addDictInfoForm"
      :attrId="attrId">
    </addDicData>

    <editDictInfo v-if="editFormVisible" :editDIcInfoSubmit="editDIcInfoSubmit" :editFormVisible.sync="editFormVisible" :editDictInfoForm="editDictInfoForm"></editDictInfo>
    </el-container>
    </div>
</template>

<script>
import _ from 'lodash'
import addDictionary from './components/add-dictionary.vue'
import editDictInfo from './components/edit-dictInfo.vue'
import addDicData from './components/add-dicData.vue'
import ztZtree  from '@/components/z-tree/z-tree.vue'
import {DEVPATH} from '@/common/js/constant'
export default {
	data(){
		return{
				testData:'',
				ztreeConfig:{
	        id : 'id',
	        pid:"parentId",
	        name:'attrName',
	        idIcon:"",
	        pidIcon:""
	      },
	      async: {
				  enable: true,
					url:DEVPATH+"/attrlist/queryAattrList",
	        autoParam:["id"],
	        contentType:"application/json",
          headers:{
            's_company_token':this.$store.getters.s_company_token
          },
					type: "post"
	      },
        dictionaryMenuList:[],
        selectNode:'',
        catalogFormVisible:false,
        infoFormVisible:false,
        editFormVisible:false,
        did:0,
        nodeFlag:0,
        dictForm:{},
        attrId:"",
        nodes:{
          isParent:true,
          id:0
        },
        submitType:"",
        addDictInfoForm:[],
        statusItem:{
    			'0':'禁用',
    			'1':'启用'
    		},
        editDictInfoForm:{},
        multipleSelection: [],
        total:0
		}
	},
	components:{
		ztZtree,
		addDictionary,
    addDicData,
    editDictInfo
	},
	methods:{
		getDictionaryList(dicID,pageNum){
			this.$post('/attrData/queryAttrDataList',{attrId:dicID,pageNum:pageNum,pageSize:12},(data)=>{
	           this.dictionaryMenuList = data;
             this.total = data.total;
	          },(err)=>{
	            alert(err)
	        })
		},
		beforeExpand(){
	  },
    nodeChange(node){
      this.nodes      = node;
      this.did        = node.id;
      this.selectNode = node.attrId;
      this.attrId     = node.attrId;
      this.nodeFlag   = node.nodeFlag;
      this.getDictionaryList(this.selectNode,0);
    },
    refresh_dictInfo(){
    },
    getList(params){
        this.$post("/attrlist/queryAattrList",params,data => {
        		this.departList = data;
       		},error => {
        	  alert(error);
        });
    },
    add_dictInfo(){
      if(this.attrId=="")
      {
        this.$message({
          message:"请先选中左测字典目录！",
          type:"warning"
        });
      }else{
        this.addDictInfoForm = [{ attrCode:'', attrId:this.attrId, attrName:'', attrOrderId:'', companyId:1028, creator:'', disenable:"1" }];
        this.infoFormVisible = true;
      }
    },
    edit_dictInfo(){
      this.$message({
        message:"暂时不确定是否要做批量修改功能！",
        type:"warning"
      });
    },
    del_dictInfo(i,o){
      let params=[];
      params.push(o.id);
      this.del_fn(params);
    },
    batchDel_dictInfo(){
      let params=[];
      _.each(this.multipleSelection,item=>{
        params.push(item.id)
      });
      this.del_fn(params);
    },
    del_fn(params){
      this.$post("/attrData/batchDelAttrData",params,data => {
          this.$message({
            message:"删除成功！",
            type:"success",
            callback:this.getDictionaryList(this.selectNode,0)
          });
       },error => {
         this.$message({
           message:error,
           type:"error"
         });
      });
    },
    editDIcInfoSubmit(form){
      this.$post("/attrData/updateAttrDataInfo",form,data => {
          this.$message({
            message:"修改成功！",
            type:"success",
            callback:this.editFormVisible = false
          });
       },error => {
         this.$message({
           message:error,
           type:"error"
         });
      });
    },
    addDIcTreeSubmit(form){
      this.$post("/attrlist/addAttrListInfo",form,data => {
          // this.$refs.ztree.addNodes(this.selectNode,form);
          this.$message({
            message:"添加成功！",
            type:"success",
            callback:this.catalogFormVisible = false
          });
       },error => {
         this.$message({
           message:error,
           type:"error"
         });
      });
    },
    addDictInfoSubmit(form){
      this.$post("/attrData/addAttrDataList",form,data => {
        this.infoFormVisible = false;
        this.$message({
            message:"添加成功！",
            type:"success",
            callback:this.getDictionaryList(this.selectNode,0)
          });
        },error => {
          alert(error);
      });
    },
    updateDicDataSubmit(form){
      this.$post("/attrlist/updateAttrListInfo",form,data => {
        this.catalogFormVisible = false;
          this.$message({
            message:"修改成功！",
            type:"success"
          });
        },error => {
          this.$message({
            message:error,
            type:"error"
          });
      });
    },
    add_catalog(){
      this.dictForm = {
        attrId       :'',
        attrName     :'',
        attrOrderId  :100,
        isParent     :'',
        nodeFlag     :'',
        parentId     :this.nodes.id
      };
      this.submitType = "add";
      this.catalogFormVisible = true;
    },
    del_catalog(){

      if(this.attrId == ""){
        this.$message({
          message:"请先点击要删除的字典目录哦！",
          type:"warning"
        });
      }
      else{
        this.$confirm('此操作将永久删除该目錄, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = { attrId: this.attrId, id: this.did }
          this.$post("/attrlist/deleteAttrListInfo",params,data => {
              this.$message({
                message:"删除成功",
                type:"success"
              });
            },error => {
              this.$message({
                message:error,
                type:"error"
              });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    update_catalog(){
      this.dictForm = {
        attrName    :this.nodes.attrName,
        attrOrderId :this.nodes.attrOrderId,
        attrId      :this.nodes.attrId,
        id          :this.nodes.id,
        nodeFlag    :this.nodes.nodeFlag,
        parentId    :this.nodes.parentId,
        isParent    :(this.nodes.isParent) ? 1:0
      }
      this.submitType = "update";
      this.catalogFormVisible = true;
    },
    dict_edit(v,o){
      this.editDictInfoForm = {
        attrCode    : o.attrCode,
        attrId      : o.attrId,
        attrName    : o.attrName,
        attrOrderId : o.attrOrderId,
        companyId   : 1028,
        creator     : o.creator,
        disenable   : o.disenable.toString(),
        id          : o.id
      };
      this.editFormVisible = true;
    },
    handleSelectionChange(val){
      this.multipleSelection =val;
    },
    pageChange(v){
      this.getDictionaryList(this.selectNode,v-1);
    }
	},
	created(){


	}
}
</script>
<style scope>
@import "./style.scss";
</style>
